<template>
  <div>
    <h3>欢迎光临_vue开发的收银系统_水果店</h3>
    <table>
      <th>
        <td>苹果 10 ¥ / 斤,折扣 {{dayu}} 8折 {{xiaoyu}} </td>
      </th>
      <tr>
        <td>请输入你要购买的斤数 <input type="text" value="" v-model.number="num"> </td>
      </tr>
      <tr>
        <td> <button @click="btn(num)">结账买单</button> </td>
      </tr>
      <tr>
        <td> 总账单:总价{{total}} ¥ 元 折扣价:{{pay}} ¥ 元 省了{{save}} ¥ 元</td>
      </tr>

    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dayu: "<",
      xiaoyu: ">",
      total: 0,
      pay: 0,
      save: 0,
      num: "",
    };
  },
  methods: {
    btn(n) {
      this.total = n * 10;
      this.pay = this.total * 0.8;
      this.save = this.total - this.pay;
    },
  },
};
</script>

<style>
h3 {
  text-align: center;
}
table {
  text-align: center;
}
</style>